<template>
	<!-- <view class="status_bar">
	</view> -->
	<view class="container">
		<tui-navigation-bar splitLine :zIndex="99999" :init="initNavigation" @change="opacityChange"
			:scrollTop="scrollTop" title="" backgroundColor="#fff" color="#333">
			<image v-if="opacity > 0.85" class="tui-header-icon"
				:style="{ marginTop: ((systemInfo?.statusBarHeight || 20) + 4) + 'px' }"
				src="https://static.wddzq.com/static/logo_black_v2.png"></image>
		</tui-navigation-bar>
		<u-swiper v-if="swiperList.length >= 1" :list="swiperList" keyName="bannerPic" :height="430" imgMode="widthFix"
			@click="handleSwiperClick" indicatorMode="dot" :interval="5000" indicatorActiveColor="#FFB803"
			indicatorStyle="bottom: 150rpx" :indicator="true"></u-swiper>
		<u-swiper v-else :list="swiperList" keyName="bannerPic" :height="430" imgMode="widthFix"
			@click="handleSwiperClick" indicatorMode="dot" :interval="5000" indicatorActiveColor="#FFB803"></u-swiper>
		<!--header-->
		<u-sticky v-if="stickyTop > 0" :offsetTop="stickyTop" :zIndex="9999">
			<view class="header-container">
				<view class="tui-header" style="display: flex;height: 80rpx;">
					<view class="tab-container">
						<view class="tab-item" v-for="(item, index) in categoryList" @click="handleTabsChange(item)"
							:class="filterData.activityCategoryId === item.id ? 'activeTab' : ''" :key="item.id">
							<text class="tab-item-text">{{item.name}}</text>
						</view>
					</view>
					<view class="search" @click="show = true">
						<u-input border="none" placeholder="搜索用户、俱乐部、活动" prefixIcon="search"
							prefixIconStyle="font-size: 24px;color: #CCCCCC;padding-left:10rpx;" v-model="searchValue"
							disabled></u-input>
					</view>
				</view>
				<view class="tui-header">
					<view class="tui-header-top">
						<!-- 智能 -->
						<view class="tui-sort-dropdown" v-if="dropShow">
							<view class="tui-drop-item" :class="filterData.sortType === item.value ?'active':''"
								v-for="(item,index) in sortData" :key="index" @click="handleSortClick"
								:data-index="index">
								<text class="tui-ml " style="text-align: left;">{{item.name}}</text>
							</view>
						</view>
						<view class="tui-top-item" @click="handleClick('drop')">
							<!-- {{ sortData.find(item => item.value === filterData.sortType)?.name }} -->
							<text class="tui-bold" :class="dropShow ? 'active' : ''">智能排序</text>
							<image src="https://static.wddzq.com/static/xiala_select.png"
								style="width: 40rpx;height: 40rpx;"></image>
							<!-- <tui-icon class="tui-top-icon" name="turningdown" :size="20" :color="dropShow ? '#ffb803' : '#333'" :bold="true"></tui-icon> -->
						</view>
						<view class="tui-top-item tui-screen" :class="dropShow ? 'active' : ''"
							@click="handleClick('date')">
							<text class="tui-bold">全部时间</text>
							<!-- <tui-icon name="turningdown" class="tui-top-icon" :size="20" color="#333" :bold="true"></tui-icon> -->
							<image src="https://static.wddzq.com/static/xiala_select.png"
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
						<!-- 时间 -->
						<view class="tui-sort-time" v-if="dateShow">
							<view style="padding-bottom: 20rpx;">
								<tui-calendar :dateIndex='dateIndex' activeBgColor="#FFB803" activeColor="#fff"
									rangeBgColor="rgba(255, 184, 3, .2)" :type="2" :minDate="minDate"
									maxDate="2099-12-01" @change="handleDateChange"></tui-calendar>
							</view>
						</view>
						<!-- 分类 -->
						<view class="tui-sort-category" v-if="categoryShow">
							<scroll-view scroll-y :style="{height: ((systemInfo?.screenHeight || 300) - 500) + 'px'}">
								<view>
									<view class="category-header">最近选择</view>
									<view class="category-list">
										<view class="category-list-item" @click="handleCateClick(item)"
											v-for="item in categoryData" :key="item.id">{{item.name}}</view>
									</view>
								</view>
								<view>
									<view class="category-header">全部分类</view>
									<view class="category-list">
										<view class="category-list-item" @click="handleCateClick(item)"
											v-for="item in categoryData" :key="item.id">{{item.name}}</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="tui-top-item tui-screen" :class="categoryShow ? 'active' : ''"
							@click="handleClick('category')">
							<text class="tui-bold">分类</text>
							<image src="https://static.wddzq.com/static/xiala_select.png"
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
						<view class="tui-top-item tui-screen" @tap="handleCity">
							<text class="tui-bold">{{ filterData.districtName }}</text>
							<!-- <tui-icon name="turningdown" class="tui-top-icon" :size="20" color="#333" :bold="true"></tui-icon> -->
							<image src="https://static.wddzq.com/static/xiala_select.png"
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<u-sticky v-else :offsetTop="stickyTop" :zIndex="9999">
			<view class="header-container">
				<view class="tui-header" style="display: flex;height: 80rpx;">
					<view class="tab-container">
						<view class="tab-item" v-for="(item, index) in categoryList" @click="handleTabsChange(item)"
							:class="filterData.activityCategoryId === item.id ? 'activeTab' : ''" :key="item.id">
							<text class="tab-item-text">{{item.name}}</text>
						</view>
					</view>
					<view class="search" @click="show = true">
						<u-input border="none" placeholder="搜索用户、俱乐部、活动" prefixIcon="search"
							prefixIconStyle="font-size: 22px;color: #909399;padding-left:10rpx;"
							v-model="searchValue"></u-input>
					</view>
				</view>
				<view class="tui-header">
					<view class="tui-header-top">
						<view class="tui-sort-dropdown" v-if="dropShow">
							<view class="tui-drop-item" :class="filterData.sortType === item.value ?'active':''"
								v-for="(item,index) in sortData" :key="index" @click="handleSortClick"
								:data-index="index">
								<text class="tui-ml" style="text-align: left;">{{item.name}}</text>
							</view>
						</view>
						<view class="tui-top-item" @click="handleClick('drop')">
							<text class="tui-bold" :class="dropShow ? 'active' : ''">智能排序</text>
							<image src="https://static.wddzq.com/static/xiala_select.png"
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
						<view class="tui-top-item tui-screen" :class=" dateShow ? 'active' : ''"
							@click="handleClick('date')">
							<text class="tui-bold">全部时间</text>
							<image src="https://static.wddzq.com/static/xiala_select.png"
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
						<!-- 时间 -->
						<view class="tui-sort-time" v-if="dateShow">
							<view style="padding-bottom: 20rpx;">
								<tui-calendar activeBgColor="#FFB803" activeColor="#fff"
									rangeBgColor="rgba(255, 184, 3, .2)" :isFixed="true" :type="1" :minDate="minDate"
									maxDate="2099-12-01" @change="handleDateChange"></tui-calendar>
							</view>
						</view>
						<!-- 分类 -->
						<view class="tui-sort-category" v-if="categoryShow">
							<scroll-view scroll-y :style="{height: ((systemInfo?.screenHeight || 300) - 500) + 'px'}">
								<view>
									<view class="category-header">最近选择</view>
									<view class="category-list">
										<view class="category-list-item" v-for="item in categoryData" :key="item.id">
											{{item.name}}
										</view>
									</view>
								</view>
								<view>
									<view class="category-header" style="padding-top:0px;">全部分类</view>
									<view class="category-list">
										<view class="category-list-item" v-for="item in categoryData" :key="item.id">
											{{item.name}}
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="tui-top-item tui-screen" :class="categoryShow ? 'active' : ''"
							@click="handleClick('category')">
							<text class="tui-bold">分类</text>
							<image src="https://static.wddzq.com/static/xiala_select.png"
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
						<view class="tui-top-item tui-screen" @tap="handleCity">
							<text class="tui-bold">{{ filterData.districtName }}</text>
							<image src="https://static.wddzq.com/static/xiala_select.png"
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<!--header-->
		<view class="tui-sort-mask" v-if="dropShow || categoryShow || dateShow" @click="handleSortClose"></view>
		<!-- 城市弹窗 -->
		<u-popup :show="showCity" closeOnClickOverlay
			:customStyle="{ height: ((systemInfo?.screenHeight || 300) - 200) + 'px' }" mode="bottom" :round="18"
			@close="closeCity" @open="openCity" :zIndex="1000000">
			<view style="border-top-left-radius: 18rpx;border-top-right-radius: 18rpx;overflow: hidden;">
				<view style="height: 40px;display: flex;align-items: center;justify-content: center;">
					<text style="font-size: 28rpx;color: #333;">选择城市</text>
				</view>
				<view class="u-index-list" style="padding: 0 112rpx 0 24rpx;position: relative;">
					<view
						style="position: absolute;right: 18rpx;top: 20rpx;z-index: 500;padding: 10rpx 0;background-color: #f2f2f2;width: 34rpx;border-radius: 17rpx;">
						<view style="font-size: 20rpx;color: #333;text-align: center;margin-bottom: 10rpx;"
							v-for="item in mapJson">{{item}}</view>
					</view>
					<view style="height: 80rpx;background-color: #f2f2f2;border-radius: 20px;padding: 0 30rpx;">
						<u--input border="none" customStyle="height: 80rpx;" fontSize="24" placeholder="搜索城市"
							:value="searchValue" @input="handleSearchCityChange"></u--input>
					</view>
					<scroll-view :offset-accuracy="1" :style="{
								height: ((systemInfo?.screenHeight || 300) - 200) + 'px'
							}" scroll-y @scroll="scrollHandler" ref="uList">
						<template>
							<view v-for="(item, index) in mapJson" :key="index">
								<view
									style="font-weight: bold;font-size: 28rpx;color: #333;padding: 24rpx 0;border-bottom: 1rpx solid #DDDDDD;">
									{{ item.label }}
								</view>
								<!-- <u-index-anchor :text="cityList[index]" :height="80" bgColor="#fff" size="36"></u-index-anchor> -->
								<!-- @click="handleCitySelect" -->
								<view class="list-cell" v-for="(cell, i) in item.data" :data-item="cell">
									{{cell.cityName || '-'}}
									<view class="list-cell-item" v-for="(it, itIndex) in cell.districtList"
										:data-item="it" @click="handleDistrictSelect">
										{{it.districtName || '-'}}
									</view>
								</view>
							</view>
						</template>
					</scroll-view>
				</view>
			</view>
		</u-popup>

		<!-- 活动列表 -->
		<view class="active-list">
			<view class="empty" v-if="activityList.length === 0">
				<image class="empty-img" src="https://static.wddzq.com/static/kong.png"></image>
				<view class="empty-text">暂无数据～</view>
			</view>
			<view class="active-list-item" v-for="(item, index) in activityList"
				:style="{'background-image': 'url('+item.coverPic+')','background-position': 'center'}" :key="item.id"
				:class=" item.officeUser && item.coverPic ? 'active-spec' : ''" @click="handleApply(item.id)">
				<view class="topShow" v-if="item.status == 10">
					<view class="text">报名中</view>
				</view>
				<image class="active-cover" v-if="item.officeUser && item.coverPic" :src="item.coverPic"></image>
				<view class="active-item-top">
					<view class="product-image-wrapper">
						<image class="active-item-header" mode="aspectFill" :src="item.picFirst"></image>
						<view class="active-tag" v-if="item.status === 10">活动报名中</view>
						<view class="active-tag active" v-if="item.status === 20">已截止</view>
						<view class="active-tag active" v-if="item.status === 30">已截止</view>
						<view class="active-tag active" v-if="item.status === 40">已结束</view>
						<view class="active-tag active" v-if="item.status === 50">已取消</view>
						<!-- 	<view class="active-price-wrapper">
						  <text class="active-item-right-text-unit" v-if="item.chargeType===1">¥</text><text class="active-item-right-text-price">{{item.priceShow}}</text>
						</view> -->
					</view>
					<view class="active-item-right">
						<view class="active-item-right-text">
							<view>{{item.title}}</view>
						</view>
						<view>
							<tui-tag style="margin-right: 12rpx;" backgroundColor="#FAE7DA" color="#EFA672" type=""
								shape="circle" v-if="item.discountType == 1">
								<image style="width: 1rpx;height: 26rpx;"></image>
								<text class="tab-item-text">女生优惠</text>
							</tui-tag>
							<tui-tag style="margin-right: 12rpx;" backgroundColor="#E6F0FF" color="#378CFC" type=""
								shape="circle" v-if="item.payWay == 1">
								<image style="width: 1rpx;height: 26rpx;;"></image>
								<text class="tab-item-text">线上支付</text>
							</tui-tag>
							<tui-tag style="margin-right: 12rpx;" backgroundColor="#E6F0FF" color="#378CFC" type=""
								shape="circle" v-if="item.payWay == 2">
								<image style="width: 1rpx;height: 26rpx;"></image>
								<text class="tab-item-text">线下收费</text>
							</tui-tag>
							<tui-tag backgroundColor="#FEF7D5" color="#FDC35F" shape="circle">
								<image style="width: 1rpx;height: 26rpx;"></image>
								<text class="tab-item-text">{{item.categoryName}}</text>
							</tui-tag>
						</view>
						<view class="active-addr">
							<tui-icon name="gps" size="12"
								:color="item.officeUser && item.coverPic ? '#fff' : '#666'"></tui-icon>
							<text v-if="item.distanceShow">&nbsp;{{item.distanceShow}} &nbsp;|&nbsp;</text>
							<view>&nbsp;{{item.locationName}}</view>
						</view>
						<view class="active-time">
							<tui-icon name="time" size="12"
								:color="item.officeUser && item.coverPic ? '#fff' : '#666'"></tui-icon>
							<text>&nbsp;{{item.dateShow}}</text>
						</view>
						<!--            <view class="active-shop">-->
						<!--              <image :src="item.userHeadPic"></image>&nbsp;-->
						<!--              <text>{{ item.userName }}</text>-->
						<!--            </view>-->
					</view>
				</view>
				<view class="active-item-btm">
					<!--          item. userSignUpVoList  .headPic -->
					<!-- v-if="item.status !== 10" -->
					<tui-image-group :imageList="item.imageList || []" isGroup distance="-20" borderWidth="2rpx"
						borderColor="#fff" width="60rpx" height="60rpx"></tui-image-group>&nbsp;
					<!-- <text class="active-item-bm-text" v-if="item.status === 10">报名中 {{item.signUpCount}}&nbsp;/</text> -->
					<text class="active-item-bm-text active-item-text">已报名 </text>
					<text class="active-item-bm-text active-item-num">{{item.signUpCount}}</text>
					<text class="active-item-bm-text-color">/{{item.maxSignUpCount}}</text>
					<view v-if="item.status === 10" style="flex: 1;display: flex;justify-content: flex-end;"><u-button
							customStyle="width: 200rpx;height: 72rpx;border-radius: 44rpx;margin: 0;" color="#1DD6D8"
							text="去报名"></u-button></view>
					<view v-if="[20,30,40,50].includes(item.status)"
						style="flex: 1;display: flex;justify-content: flex-end;">
						<u-button
							customStyle="width: 200rpx;height: 72rpx;border-radius: 44rpx;margin: 0;background-color: #1DD6D8;"
							color="#fff">
							{{
								texts[item.status]
							}}
						</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
	<tui-ctabbar :current="0" :refresh="refresh"></tui-ctabbar>
	<u-popup :show="popUpShow" :round="10" mode="center" @close="popUpCloseHandler" @closeable="true"
		bgColor="transparent">
		<view class="pop-up-wrapper">
			<image v-for="(item,index) in popUpList" class="pop-up-image" mode="widthFix" :src="item.bannerPic" />
			<image class="close-popup-view" @click="hidePopupView" mode="widthFix"
				src="/static/publish/close-icon.png" />
		</view>
	</u-popup>
	<!-- 搜索 -->
	<u-popup :show="show" mode="center" @close="closeSearch" @open="openSearch" :zIndex="100000">
		<view class="searchView" :style="{'top':scrollTop > 0 ? '200rpx' : '310rpx','width': '100%' }">
			<view style="height: 80rpx;">
				<view class="searchType  flex-middle flex-display">
					<view style="margin-left: 10rpx;">
						<u-icon name="search" size="50" color="#CCCCCC"></u-icon>
					</view>
					<u-input v-model="searchValue" type="text" border="false" placeholder="搜索用户、俱乐部、活动"
						@change="searchClick" />
					<view class="searchBtn search-Btn" @click.stop="searchClick">搜索</view>
				</view>
			</view>
			<view class="searchList">
				<scroll-view class="keyword-box" scroll-y>
					<view class="keyword-block" v-if="historyList.length>0">
						<view class="keyword-list-header">
							<view>历史搜索</view>
						</view>
						<view class="keyword">
							<view v-for="(item, index) in historyList" :key="index" @tap="doHisSearch(item.text)">
								{{item.text}}
							</view>
						</view>
					</view>
					<view class="keyword-block" v-if="oldKeywordList.length>0 && searchValue.length != 0">
						<view class="keyword-list-header">
							<view>搜索结果</view>
						</view>
						<view class="keyList">
							<view v-for="(item, index) in oldKeywordList" :key="index" @tap="doHisSearch(item)">{{item}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		login,
		getBannerList,
		getActivityCategoryList,
		getActivityPartPage,
		getActivityNormalPage,
		getCityViewVoList,
		getUserInfo,
		getAppLocationVo
	} from '../../config/api.js';
	import {
		to,
		getSystemInfo,
		pxToRpx,
		isLogin
	} from '../../config/utils.js';
	import {
		mapJson
	} from '../../config/common.js';
	export default {
		data() {
			return {
				popUpShow: false,
				texts: {
					20: '已截止',
					30: '已截止',
					40: '已结束',
					50: '已取消'
				},
				refresh: 0,
				systemInfo: '',
				loading: false,
				hasMore: true,
				current: 0,
				opacity: 0,
				top: 0,
				scrollTop: 0,
				initNavigation: {
					opacity: 1
				},
				stickyTop: 0,
				swiperList: [{}],
				popUpList: [],
				categoryList: [{
						id: null,
						name: '娱乐活动'
					},
					{
						id: 1,
						name: '户外活动'
					}
				],
				activityList: [{
					status: 10,
					picFirst: 'https://img2.baidu.com/it/u=4238837287,4120689219&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
					title: '徐汇上海南站羽毛球新手欢乐+竞技局',
					discountType: 1,
					payWay: 1,
					categoryName: '运动',
					locationName: '5km｜滨河国际大厦B座1302',
					dateShow: '20:00-22:00 周三 05.31',
					signUpCount: 10,
					maxSignUpCount: 15,
				}],
				filterData: {
					pages: 1,
					size: 20,
					activityCategoryId: null,
					activityType: '1',
					cityCode: 350200,
					cityName: '厦门市',
					districtCode: 350200,
					districtName: '厦门区',
					sortType: 1,
				},
				// 日期弹窗
				showDate: false,
				// 城市弹窗
				showCity: false,
				// 城市数据
				cityList: mapJson,
				cityListSearch: [

				],
				cityArr: [
					[{
						cityCode: 350200,
						cityName: '厦门市'
					}],
				],
				// 智能排序下拉
				dropShow: false,
				sortData: [{
						name: '时间最近',
						value: 1
					},
					{
						name: '距离最近',
						value: 2
					},
					{
						name: '价格从低到高',
						value: 3
					},
					{
						name: '帮组活动',
						value: 4
					},
					{
						name: '竞技比赛',
						value: 4
					},
				],
				imageList: [],
				tabberCurrent: 0,
				// 发活动
				showCreate: false,
				minDate: '',
				searchValue: '',
				show: false,
				showSearch: false,
				historyList: [{
						key: '1',
						text: '历史按钮1',
					},
					{
						key: '2',
						text: '历史按钮2',
					},
					{
						key: '3',
						text: '历史按钮3',
					},
					{
						key: '1',
						text: '历史按钮1',
					}
				],
				oldKeywordList: ['查询条件1', '查询条件2', '查询条件3', '查询条件4'],
				categoryShow: false,
				dateShow: false,
				// dateList:['本周末','本周内','一月内'],
				// dateIndex:0,
				categoryData: [],
			}
		},
		onReachBottom() {
			if (this.loading || !this.hasMore) return;
			this.filterData = {
				...this.filterData,
				pages: this.filterData.pages + 1
			};
			this.fetchActivityNormalPage(this.filterData);
		},
		onShow() {
			this.refresh = Math.random();
			this.current = 1;
			this.resetActiveList();
			this.fetchUserInfo();
		},
		onReady() {
			let that = this;
			uni.hideTabBar();
			uni.getSetting({
				success(res) {
					if (!res.authSetting['scope.userLocation']) {
						uni.authorize({
							scope: 'scope.userLocation',
							success() {
								uni.getLocation({
									type: 'wgs84',
									success: function(res) {
										let LNGLAT = res.longitude + "," + res.latitude;
										uni.$u.http.setConfig((config) => {
											config.header = {
												...(config.header || {}),
												LNGLAT: LNGLAT
											};
											return config
										})
										uni.setStorageSync({
											key: "LNGLAT",
											data: LNGLAT
										})
										that.getLocationData();
									},
									fail: function(e) {
										console.log(e);
									}
								});
							}
						})
					} else {
						uni.getLocation({
							type: 'wgs84',
							success: function(res) {
								let LNGLAT = res.longitude + "," + res.latitude;
								uni.$u.http.setConfig((config) => {
									config.header = {
										...(config.header || {}),
										LNGLAT: LNGLAT
									};
									return config
								})
								uni.setStorage({
									key: "LNGLAT",
									data: LNGLAT
								})
								that.getLocationData();
							},
							fail: function(e) {
								console.log(e);
							}
						});
					}
				}
			})
			let date = new Date();
			this.minDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
			this.calcStickyTop();
			this.fetchBanner();
			this.fetchPopUpList();
			this.fetchActivityCategoryList();
			// this.fetchCityViewVoList();
			this.systemInfo = getSystemInfo();
			console.log(this.systemInfo);
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// if(!this.dropShow) return;
			// 关闭条件
			// this.dropShow = false;
		},
		onPullDownRefresh() {
			// if(!this.hasMore) return;
			this.resetActiveList();
		},
		onShareAppMessage() {
			return {
				title: '万事皆可组局！',
				path: `/pages/index/index`,
				imageUrl: 'https://static.wddzq.com/static/guanfang_share.jpg'
			};
		},

		methods: {
			showPopUpHandler() {
				this.popUpShow = true;
			},
			hidePopupView() {
				this.popUpShow = false;
			},
			popUpCloseHandler() {
				this.popUpShow = false;
				const ids = uni.getStorageSync('__popUpIds') || [];
				ids.push(this.popUpList[0].id);
				uni.setStorageSync(`__popUpIds`, ids);
			},
			handleSearchCityChange(value) {
				this.searchValue = value;
				let cityListSearch = this.mapJson.map(item => {
					let {
						data,
						letter
					} = item;
					let _data = (data || []).filter(it => it.cityName.indexOf(this.searchValue) > -1) || [];
					return {
						letter,
						data: _data
					};
				})
				this.cityListSearch = cityListSearch.filter(item => item.data.length > 0);
			},
			// 计算吸顶距离
			calcStickyTop() {
				let system = getSystemInfo();
				let top = pxToRpx(44 + system.statusBarHeight);
				this.stickyTop = top;
				return top;
			},
			scrollHandler() {},
			handleSwiperClick(index) {
				let current = this.swiperList[index];
				if (!current) return;
				if (current.actionType === 1) {
					current.actionUrl && uni.navigateTo({
						url: current.actionUrl
					})
				} else if (current.actionType === 2) {
					current.actionUrl && uni.navigateTo({
						url: `/pages/webview/webview?url=` + encodeURIComponent(`${current.actionUrl}`)
					})
				}
			},
			opacityChange({
				opacity
			}) {
				this.opacity = opacity;
			},
			closeDate() {
				this.showDate = false;
			},
			openDate() {
				this.showDate = true;
				this.dropShow = false;
				this.showCity = false;
			},
			closeCity() {
				this.showCity = false;
			},
			openCity() {
				this.showCity = true;
				this.showDate = false;
				this.dropShow = false;
			},
			openSearch() {
				this.show = true;
				this.showSearch = true;
				// this.showCity = true;
			},
			closeSearch() {
				this.show = false;
				this.showSearch = false;
			},
			// handleCityChange(index) {
			// 	console.log(index);
			// 	this.showCity = false;
			// },
			// 排序点击事件

			handleSortClose() {
				this.dropShow = false;
				this.categoryShow = false;
				this.dateShow = false;
			},
			handleSortClick(e) {
				const {
					currentTarget
				} = e || {};
				const {
					dataset
				} = currentTarget || {};
				this.filterData = {
					...this.filterData,
					sortType: this.sortData[dataset.index].value
				};
				this.handleSortClose();
				this.resetActiveList();
			},
			// 日期点击事件
			// handleDateClick() {
			// 	this.dateShow = true;

			// },
			handleDateChange(e) {
				const {
					startDate,
					endDate
				} = e;
				let start = new Date(startDate),
					end = new Date(endDate);
				let startStr = start.getFullYear() + '/' + (start.getMonth() + 1) + '/' + start.getDate();
				let endStr = end.getFullYear() + '/' + (end.getMonth() + 1) + '/' + end.getDate();
				const _startDate = new Date(startDate + ' 00:00:00').getTime();
				const _endDate = new Date(endDate + ' 23:59:59').getTime();
				console.log(startStr, endStr);
				this.filterData = {
					...this.filterData,
					startDate: _startDate,
					endDate: _endDate
				};
				this.dateShow = false;
				this.resetActiveList();
			},

			handleTabsChange(data) {
				const {
					id
				} = data || {};
				this.filterData = {
					...this.filterData,
					activityCategoryId: id
				};
				this.resetActiveList();
			},
			handleCity() {
				this.showCity = true;
			},
			handleCitySelect(e) {
				const {
					cityCode,
					cityName
				} = e.currentTarget?.dataset?.item || {};
				this.filterData = {
					...this.filterData,
					cityCode,
					cityName,
				};
				this.showCity = false;
				this.resetActiveList();
				uni.setStorage({
					key: '__local__city',
					data: cityCode + ',' + cityName
				})
			},
			handleDistrictSelect(e) {
				const {
					districtCode,
					districtName
				} = e.currentTarget?.dataset?.item || {};
				this.filterData = {
					...this.filterData,
					districtCode,
					districtName,
				};
				this.showCity = false;
				this.resetActiveList();
				uni.setStorage({
					key: '__local__district',
					data: districtCode + ',' + districtName
				})
				console.log(e, 'e');
			},
			handleTabbarClick(data) {
				console.log(data);
				this.tabberCurrent = data.index;
				if (data.index === 2) {
					this.showCreate = true;
				}
			},
			handleApply(activityId) {
				uni.navigateTo({
					url: `/pages/detail/detail?activityId=${activityId}`
				})
			},
			async getLocationData() {
				let [cityErr, cityData] = await to(getAppLocationVo());
				if (cityErr) {
					return uni.showToast({
						title: cityErr.msg || '获取定位城市code失败'
					})
				}
				if (cityData?.success && cityData?.data) {
					this.filterData = {
						...this.filterData,
						cityCode: cityData.data?.codeCity,
						cityName: cityData.data?.nameCity,
						districtCode: cityData.data?.codeDistrict,
						districtName: cityData.data?.nameDistrict,
					};
					this.resetActiveList();
					uni.setStorage({
						key: '__local__city',
						data: cityData.data?.codeCity + ',' + cityData.data?.nameCity
					});
					uni.setStorage({
						key: '__local__district',
						data: cityData.data?.codeDistrict + ',' + cityData.data?.nameDistrict
					})
				}
			},
			// 重新请求接口
			resetActiveList() {
				let params = {
					...this.filterData,
					pages: 1,
				};
				this.loading = false;
				this.hasMore = true;
				// this.activityList = [];
				this.fetchActivityNormalPage(params, true);
			},
			async fetchBanner() {
				const [err, banner] = await to(getBannerList({
					position: '1'
				}));
				if (err) return;
				// this.swiperList = banner?.data || [];
				this.swiperList = [
					'https://env-00jxhkht7vx1.normal.cloudstatic.cn/img/Image%20Placeholder%20%28Copy%20paste%20here%29%402x.png',
				];
			},
			async fetchPopUpList() {
				const [err, banner] = await to(getBannerList({
					position: '4'
				}));
				if (err) return;
				/// 过滤掉已经弹出的id
				const ids = uni.getStorageSync('__popUpIds') ?? [];
				// const ids = [];
				const list = (banner?.data || []).filter(item => ids.indexOf(item.id) < 0);
				if ((list ?? []).length > 0) {
					this.popUpList = list;
					this.showPopUpHandler();
				}
			},
			// 分类
			async fetchActivityCategoryList() {
				const [err, activityCategory] = await to(getActivityCategoryList());
				if (err) return;
				this.categoryData = [
					...this.categoryData,
					...(activityCategory?.data || [])
				];
				console.log(this.categoryData, 'this.categoryData');
			},
			async fetchActivityNormalPage(params, isClear) {
				this.loading = true;
				params.current = params.pages;
				let server = getActivityNormalPage;
				console.log(this.activityCategoryId)
				// 派对
				if (this.filterData.activityCategoryId === -1) {
					server = getActivityPartPage;
					delete params.activityCategoryId;
				}
				const [err, activityListData] = await to(server(params));
				this.loading = false;
				uni.stopPullDownRefresh();
				if (err) return;
				let records = activityListData?.data?.records || [];

				records = records.map(item => {
					item.imageList = item.userSignUpVoList?.map(item => item.headPic) || [];
					return item;
				})

				if (records.length < this.filterData.size) {
					this.hasMore = false;
				}
				records = [
					...records,
					...records,
					...records,
					...records,
					...records,
					...records,
					...records,
					...records,
					...records,
					...records,
					...records,
				]
				console.log(records, 'records');
				this.activityList = isClear ? records : this.activityList.concat(records);
			},
			async fetchCityViewVoList() {
				const [err, cityData] = await to(getCityViewVoList());
				if (err) return;
				// let cityList = [], cityArr = [];
				// (cityData?.data || []).forEach(city => {
				// 	cityList.push(city.cityFirstLetter || '-');
				// 	cityArr.push(city.cityVoList || []);
				// })
				// this.cityList = cityList;
				// this.cityArr = cityArr;
				let cityList = [];
				(cityData?.data || []).forEach(city => {
					let data = city.cityVoList ||
				[]; //?.map(item => ({ id: item.cityCode, name: item.cityName })) || []
					data.forEach(item => {
						item.districtList = [{
								districtName: "xx区",
								districtCode: 110203,
							},
							{
								districtName: "xx区",
								districtCode: 110203,
							},
							{
								districtName: "xx区",
								districtCode: 110203,
							},
						]
					});
					cityList.push({
						letter: city.cityFirstLetter || '-',
						data: data
					})
				})
				this.cityList = cityList
				this.cityListSearch = cityList;
				console.log(cityList, 'cityList');
			},
			async fetchUserInfo() {
				if (isLogin()) {
					const [err, userInfo] = await to(getUserInfo());
					if (err) return;
					if (userInfo.success && userInfo.data) {
						uni.setStorage({
							key: 'userInfo',
							data: JSON.stringify(userInfo.data)
						})
					}
				}
			},
			searchClick(item) {
				console.log(item, 'item');
				this.searchValue = item;
			},
			doHisSearch(item) {
				console.log(item, 'item');
				this.searchValue = item;
				this.closeSearch();
			},
			//弹窗
			handleClick(type) {
				if (type === 'date') {
					this.dateShow = !this.dateShow;
					this.categoryShow = false;
					this.dropShow = false;
				}
				if (type === 'category') {
					this.categoryShow = !this.categoryShow;
					this.dropShow = false;
					this.dateShow = false;
				}
				if (type === 'drop') {
					this.dropShow = !this.dropShow;
					this.dateShow = false;
					this.categoryShow = false;
				}
				if (type === 'city') {
					this.showCity = !this.showCity;
				}
				// if(this.dropShow) {
				// 	uni.pageScrollTo({
				// 		scrollTop: this.stickyTop + pxToRpx(12)
				// 	})
				// }
			},
			handleCateClick(item) {
				this.categoryShow = false;
				console.log(item, 'item');
			}
		}
	}
</script>

<style lang="scss">
	.searchView {
		position: fixed;
		// display: flex;
		// flex-direction: column;
		padding-top: 20rpx;
		left: 0px;
		height: 60%;
		width: 100%;
		border-radius: 28rpx;
		background-color: #FFFFFF;

		.searchList {
			padding-top: 20rpx;

			.historyList {
				display: flex;
				justify-content: flex-start;
				padding: 10rpx;

				.historyBtn {
					padding: 0rpx 10rpx;
					border-radius: 25rpx;
					border: 1px solid #A8A8A8;
					line-height: 34rpx;
					font-size: 12px;
					margin-right: 20rpx;
				}
			}
		}
	}

	.pop-up-wrapper {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 650rpx;
		min-height: 300rpx;
		max-height: 650rpx;
		overflow-y: auto;
	}

	.close-popup-view {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		z-index: 9;
		right: 16rpx;
		top: 16rpx;
	}

	.pop-up-image {
		width: 650rpx;
		border-radius: 16rpx;
	}

	.tab-container {
		display: flex;
		position: relative;
		z-index: 1000;
		height: 80rpx;
		width: 50%;
		display: flex;
		padding-left: 28rpx;
		justify-content: space-around;
	}

	.tab-item {
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: relative;
		margin-right: 20rpx;
		height: 52rpx;
		font-size: 30rpx;
		color: #666363;
	}

	.tab-item.activeTab::after {
		position: absolute;
		content: ' ';
		left: 0rpx;
		bottom: 5rpx;
		width: 100%;
		height: 16rpx;
		background-color: #92E7EC;
		z-index: 99;
	}

	.activeTab {
		color: #3D3D3D;
		position: relative;
		z-index: 100;
		font-family: Source Han Sans;
		font-size: 36rpx;
		font-weight: 500;
		line-height: normal;
		text-align: center;
	}

	.tab-item image {
		width: 44rpx;
		height: 44rpx;
		margin-right: 4rpx;
		position: relative;
		z-index: 100;
	}

	.tab-item .tab-item-text {
		// color: #666363;
		position: relative;
		z-index: 100;
		font-family: Source Han Sans;
		// font-size: 30rpx;
		font-weight: 500;
		line-height: normal;
		text-align: center;
	}

	/* 隐藏scroll-view滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	/*header*/
	.header-container {
		margin-top: -120rpx;
		background-color: #fff;
		border-top-left-radius: 18rpx;
		border-top-right-radius: 18rpx;
		position: relative;
		z-index: 100000000;
		/* padding: 24rpx 36rpx; */
		padding: 24rpx 0;

	}

	.tui-header-icon {
		width: 120rpx;
		height: 32px;
		position: fixed;
		top: 0;
		left: 20rpx;
		padding: 0 12rpx;
		display: flex;
		align-items: center;
		transform: translateZ(0);
		z-index: 99999;
		box-sizing: border-box;
		animation: fade-in .5s ease;
	}

	.tui-header {
		width: 100%;
		height: 64rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: relative;
		z-index: 100000;
	}

	.tui-header-top {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 26rpx;
		color: #333;
		height: 64rpx;
		position: relative;
	}

	.tui-sort-dropdown {
		position: absolute;
		top: 64rpx;
		left: 0;
		z-index: 10000;
		width: 100%;
		background-color: #fff;
		border-bottom-left-radius: 18rpx;
		border-bottom-right-radius: 18rpx;
		animation: fade-in .3s ease;
		animation: fade-Y .3s ease;
	}

	@keyframes fade-in {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes fade-Y {
		from {
			top: 20rpx;
		}

		to {
			top: 64rpx;
		}
	}

	.tui-sort-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		z-index: 9998;
	}

	.tui-top-item {
		height: 52rpx;
		line-height: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F5F5F5;
		margin-left: 24rpx;
		border-radius: 26rpx;
		padding: 0rpx 18rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.tui-top-item .tui-bold.active {
		color: #ffb803;
	}

	.tui-top-icon {
		padding-top: 10rpx;
	}

	/* 智能排序下拉样式 */
	.tui-scroll-box {
		background-color: #fff;
	}

	.tui-drop-item {
		margin-left: 24rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 28rpx;
		color: #000;
		padding-left: 20rpx;
	}

	.tui-drop-item.active {
		color: #ffb803;
	}

	/*header*/

	/* 城市列表 */
	.list-cell {
		box-sizing: border-box;
		width: 100%;
		padding: 10rpx 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.list-cell-item {
		box-sizing: border-box;
		width: 100%;
		padding: 10rpx 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	/* 城市列表 */

	/* 活动列表 */
	.active-list {
		padding-top: 20rpx;
		margin: 0 24rpx;
	}

	.active-list-item {
		padding: 44rpx 24rpx;
		border-radius: 18rpx;
		background-color: #fff;
		overflow: hidden;
		margin-bottom: 18rpx;
		overflow: hidden;
		position: relative;
	}

	.active-cover {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9;
	}

	.active-spec {
		background-color: #96AE64;
	}

	.active-tag {
		width: 280rpx;
		height: 64rpx;
		border-radius: 0rpx 0rpx 18rpx 18rpx;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: white;
		bottom: 0;
		left: 0;
		position: absolute;
		z-index: 10;
	}

	.active-tag.active {
		color: #aaa;
		background-color: #f2f2f2;
	}

	.active-item-top {
		display: flex;
		flex-direction: row;
		position: relative;
		z-index: 10;
		padding-bottom: 24rpx;
	}

	.product-image-wrapper {
		position: relative;
		width: 280rpx;
		height: 232rpx;
		margin-right: 16rpx;
	}

	.active-item-header {
		position: absolute;
		top: 0;
		left: 0;
		width: 280rpx;
		height: 232rpx;
		border-radius: 18rpx;
	}

	.active-item-right {
		width: 358rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.active-item-right-text {
		font-size: 32rpx;
		/* margin-bottom: 12rpx; */
		display: flex;
		justify-content: space-between;
	}

	.active-item-right-text view {
		flex: 1;
		color: #000;
	}

	.active-spec .active-item-right-text view {
		color: #fff;
	}

	.active-price-wrapper {
		display: flex;
		position: absolute;
		top: 4rpx;
		left: 4rpx;
		z-index: 9;
		padding: 0 18rpx;
		border-radius: 18rpx 8rpx 8rpx 8rpx;
		background: white;
	}

	.active-item-right-text-unit {
		font-size: 28rpx;
		color: #FFB803;
		font-weight: bold;
		margin-top: 10rpx
	}

	.active-item-right-text-price {
		font-size: 36rpx;
		color: #FFB803;
		font-weight: bold;
	}

	.active-addr {
		margin-top: 12rpx;
		margin-bottom: 12rpx;
	}

	.active-addr,
	.active-time,
	.active-shop {
		font-size: 24rpx;
		color: #666;
		display: flex;
		align-items: center;
	}

	.active-spec .active-addr,
	.active-spec .active-time,
	.active-spec .active-shop {
		color: #fff;
	}

	.active-addr view {
		flex: 1;
		height: 40rpx;
		margin-top: 6rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.active-shop {
		margin-top: 22rpx;
		margin-bottom: 26rpx;
	}

	.active-shop image {
		width: 32rpx;
		height: 32rpx;
		border-radius: 16rpx;
	}

	.active-shop text {}

	.active-item-btm {
		display: flex;
		align-items: center;
		border-top: 4rpx solid #F5F5F5;
		padding-top: 22rpx;
		position: relative;
		z-index: 10;
	}

	.active-spec .active-item-bm {
		color: #fff;
	}

	.active-item-bm {
		flex: 1;
		padding-left: 12rpx;
		font-size: 28rpx;
		color: #FFB803;
	}

	.active-item-bm-text {
		font-size: 28rpx;
		padding-right: 6rpx;
	}

	.active-item-num {
		color: #FFB803;
	}

	.active-item-text {
		color: #A8A8A8;
	}

	.active-item-bm-text-color {
		font-size: 28rpx;
		color: #333;
	}

	.active-spec .active-item-bm-text-color,
	.active-spec .active-item-bm-text {
		color: #fff;
	}

	.search {
		height: 54rpx;
		padding-right: 42rpx;
		padding-left: 20rpx;
	}

	.search .u-input {
		background-color: #F5F5F5;
		height: 54rpx;
		border-radius: 42rpx !important;
		overflow: hidden;
		/* 隐藏溢出的内容 */
		white-space: nowrap;
		/* 保持文本在一行显示 */
		text-overflow: ellipsis;
		/* 显示省略号 */
		font-family: Source Han Sans;
		font-size: 12px;
		font-weight: 350;
		line-height: 24px;
		text-align: right;
		letter-spacing: 0px;
	}

	.search .input-placeholder {
		overflow: hidden;
		/* 隐藏溢出的内容 */
		white-space: nowrap;
		/* 保持文本在一行显示 */
		text-overflow: ellipsis;
		/* 显示省略号 */
		font-family: Source Han Sans;
		font-size: 12px;
		font-weight: 350;
		line-height: 24px;
		letter-spacing: 0px;
	}

	.searchBar {
		// z-index: 99999999;
		position: fixed;
		height: 100%;
		width: 100%;
		// background-color: rgba(0, 0, 0, 0.1);
		// top: 0;
	}

	//查询搜索
	.keyword-box {
		height: 60%;
		border-radius: 28rpx 28rpx;
		background-color: #fff;
	}

	.keyword-box .keyword-block {
		padding: 10upx 0;
	}

	.keyword-box .keyword-block .keyword-list-header {
		width: 94%;
		padding: 10upx 3%;
		font-size: 28rpx;
		color: #A1A1A1;
		display: flex;
		justify-content: space-between;
	}

	.keyword-box .keyword-block .keyword-list-header image {
		width: 40upx;
		height: 40upx;
	}

	.keyword-box .keyword-block .keyword {
		width: 94%;
		padding: 3px 3%;
		display: flex;
		flex-flow: wrap;
		justify-content: flex-start;
	}

	.keyword-box .keyword-block .hide-hot-tis {
		display: flex;
		justify-content: center;
		font-size: 28upx;
		color: #6b6b6b;
	}

	.keyword-box .keyword-block .keyword>view {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 38upx;
		padding: 0 10upx;
		margin: 10upx 20upx 10upx 0;
		height: 54rpx;
		font-size: 24upx;
		border: 1px solid #F2F2F2;
		color: #6b6b6b;
		line-height: 60upx;
	}

	.keyword-block .keyList {
		width: 94%;
		padding: 10upx 3%;
		font-size: 24upx;
		line-height: 70rpx;
	}

	.searchType {
		border-radius: 36rpx;
		margin: 32rpx;
		// border: 1px solid #E60012;
		height: 84rpx;
		background-color: #f5f5f5;
		z-index: 2;
	}

	.searchBtn {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 0rpx 36rpx 36rpx 0rpx;
		color: #000;
		text-align: center;
		position: relative;
	}

	.searchBtn::after {
		position: absolute;
		content: ' ';
		left: 0rpx;
		top: 15rpx;
		width: 4rpx;
		height: 32rpx;
		background-color: #A1A1A1;
		z-index: 99;
	}

	// .search-Btn::after{
	// 	position: absolute;
	// 	// left: -10rpx;
	// 	// top:5rpx;
	// 	bottom: 5rpx;
	// 	width: 4rpx;
	// 	height: 16rpx;
	// 	background-color: #A1A1A1;
	// 	display: block;
	// }
	.flex-display {
		display: flex;
	}

	.flex-middle {
		justify-content: center;
		align-items: center;
		align-self: center;
		align-content: center;
	}

	.tui-sort-category,
	.tui-sort-time {
		position: absolute;
		top: 64rpx;
		left: 0;
		z-index: 10000;
		width: 100%;
		background-color: #fff;
		border-bottom-left-radius: 18rpx;
		border-bottom-right-radius: 18rpx;
		animation: fade-in .3s ease;
		animation: fade-Y .3s ease;
	}

	.category-header {
		padding-left: 32rpx;
		padding-top: 20rpx;
		color: #A1A1A1;
		line-height: 40rpx;
		font-size: 24rpx;
	}

	.category-list {
		padding: 32rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		flex-wrap: wrap;

		.category-list-item {
			background-color: #F5F5F5;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 16rpx;
			margin-right: 10rpx;
			margin-bottom: 12rpx;
			width: 23%;
		}
	}

	.topShow {
		border-radius: 24rpx 0rpx 0rpx 0rpx;
		width: 130rpx;
		height: 130rpx;
		position: absolute;
		top: 0px;
		left: -20rpx;
		z-index: 999;
		clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
		background: linear-gradient(92deg, #4EFAFF 0%, #9FF9FF 96%);

		.text {
			padding-top: 10rpx;
			padding-left: 10rpx;
			font-size: 12px;
			transform: rotateZ(-45deg);
		}
	}
</style>